import { uploadPictureByBatchUsingPost } from '@/services/backend/fileController';
import { ProFormText } from '@ant-design/pro-components';
import { ProForm, ProFormDigit } from '@ant-design/pro-form';
import '@umijs/max';
import {Flex, Form, message} from 'antd';
import React, { useState } from 'react';

interface Props {
  params?:any;
  onFinish?: () => void;
}
/**
 * 用户管理页面
 *
 * @constructor
 */
const IndexPage: React.FC<Props> = (props) => {
  const {params,onFinish}=props
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const onSubmit = async (values: API.PictureUploadByBatchRequest) => {
    setLoading(true);
    try {
      await uploadPictureByBatchUsingPost(
        {
          ...values,
          ...params
        }
      );
      message.success('创建成功');
      onFinish?.();
    } catch (e: any) {
      message.error(e.message);
    }
    setLoading(false);
  };
  return (
    <>
      <Flex justify={'center'}>
        <ProForm<API.PictureUploadByBatchRequest>
          loading={loading}
          form={form}
          submitter={{
            searchConfig: {
              submitText: '创建',
            },
          }}
          onFinish={(value) => onSubmit(value)}
        >
          <ProFormText
            width="md"
            name="namePrefix"
            label="名称前缀"
            placeholder="请输入名称前缀"
            rules={[
              {
                required: true,
                message: '名称前缀是必填项！',
              },
            ]}
          />
          <ProFormText
            width="md"
            name="searchText"
            label="搜索词"
            placeholder="请输入搜索词"
            rules={[
              {
                required: true,
                message: '搜索词是必填项！',
              },
            ]}
          />
          <ProFormDigit
            width="md"
            name="count" // 注意：这里应该使用不同的name属性，避免与上面的searchText冲突
            label="数字输入框"
            placeholder="请输入数字"
            max={30}
            rules={[
              {
                required: true,
                message: '数字是必填项！',
              },
            ]}
          />
        </ProForm>
      </Flex>
    </>
  );
};
export default IndexPage;
